<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
/**
*
* Copyright junaoki
*/

<html>
<head>

	<style type="text/css">
		.hoverClassB.hoverClassA {
			background: white;
		}
		.hoverClassB {
			background: blue;
		}
		.image {
			border: 1px solid;
		}

	</style>

	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script type="text/javascript" src="callout.js"></script>

	<script>
		$(function() {
			$( ".image" ).draggable({ 
				revert: 'invalid', 
				scroll: false,
				containment: '#container',
				helper: 'clone',
				start : function() {
//				$( "#drop_div" ).removeClass("hoverClassB");
//					$("#root_div").css("overflow", "visible");
					// this.style.display="none";
				},
				stop: function() {
//					$("#root_div").css("overflow", "auto");
//					this.style.display="";
				}

			});
			$( "#drop_div" ).droppable({ 
				accept: '.image',
				activeClass: "hoverClassA",
				drop: function(event, ui) {

//					$(ui.draggable[0].id).remove();
					// $("drop_div").add(ui.draggable[0]);
					ui.draggable.appendTo($("#drop_div"));
					var notification = new WindowNotification("body");
					notification.showNotification("dropped dropped and this message should be centered", { backgroundcolor: "LawnGreen", icon: "ui-icon-circle-check"});

				}
				
				
			});

			var content = "";
			content += "<div id='calloutDiv1'>";
				content += "<div> div1 </div>";
				content += "<input type='text' value='default value' />";
				content += "<button type='button' onClick='buttonAOnClick(this);' >Button A</button>";
				content += "<div>";
					content += "<button type='button' >Button B</button>";
					content += "<div>";
						content += "<button type='button' >Button C</button>";
					content += "</div>";
				content += "</div>";
			content += "</div>";

			$( "#callout1" ).callout(content, {});
			$( "#callout2" ).callout(content, { width: "400px" });
			$( "#callout3" ).callout("#calloutDiv2", { width: "400px" });

			$( "#callout4" ).callout(content, { trigger: "click" });


		});

		function buttonAOnClick(element){
			alert("called from '" + element + "'!");
		}

		function redNotification(){
			var notification = new WindowNotification("body");
			notification.showNotification("red notification", { backgroundcolor: "red", icon: "ui-icon-alert"});
		}

		function defaultNotification(){
			var notification = new WindowNotification("body");
			notification.showNotification("default notification");
		}

	</script>

	<script type="text/javascript" src="WindowNotification.js">

	</script>

</head>
<body>

	<div id="container" style="background: pink; width: 1000px; height: 250px; ">
		<div id="root_div" class="demo" style="float: left; background: red; width: 400px; height: 200px; overflow: auto;">
			<img id="img1" class="image" src="http://jqueryui.com/images/home-nav-widgets.gif"/>
			<img id="img2" class="image" src="http://jqueryui.com/images/home-nav-themes.gif"/>
			<img id="img3" class="image" src="http://jqueryui.com/images/home-nav-docs.gif"/>
			<img id="img4" class="image" src="http://static.jquery.com/ui/css/../images/logo.gif"/>
			<img id="img5" class="image" src="http://jqueryui.com/images/icon_appendto.png"/>
		</div>

		<div id="drop_div" class="hoverClassB" style="width: 400px; height: 200px; overflow: hidden;"></div>
	</div>

	<button id="buttonRed" onClick="redNotification();">Red Notification</button>
	<button id="buttonDefault" onClick="defaultNotification();">Default Notification</button>

	<div id="callout1" style="width:50px; height:50px; background-color:red;">callout1</div>
	<div id="callout2" style="width:50px; height:50px; background-color:blue;">callout2</div>
	<div id="callout3" style="width:50px; height:50px; background-color:green;">callout3</div>
	<!--
	<div id="callout4" style="width:200px; height:50px; background-color:green;">with left click(regular click)</div>
	-->
	<button type="button" id="callout4" onClick="alert("alert!");">with left click(regular click)</button>

	<div id="calloutDiv2">
		<div style="background-color: pink;"> div2 </div>
	</div>


</body>
</html>


